<template>
  <div class="table-scroll-container" :style="{ height: containerHeight }" ref="scrollContainer">
    <!-- 通过插槽传递表格高度给子组件（表格） -->
    <slot :tableHeight="tableHeight"></slot>
  </div>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue'

export default {
  name: 'TableScrollContainer',
  props: {
    topHeight: {
      type: Number,
      default: 220
    },
    // 分页高度（默认50px，可在使用时调整）
    paginationHeight: {
      type: Number,
      default: 50
    }
  },
  setup(props) {
    const scrollContainer = ref(null)
    const tableHeight = ref(0) // 计算后的表格高度

    // 计算表格高度
    const calculateTableHeight = () => {
      if (scrollContainer.value) {
        // 容器高度 - 分页高度 = 表格可用高度
        tableHeight.value = scrollContainer.value.clientHeight - props.paginationHeight
      }
    }

    // 初始化高度
    onMounted(() => {
      calculateTableHeight()
      // 监听窗口 resize
      window.addEventListener('resize', calculateTableHeight)
    })

    // 卸载时移除监听
    onUnmounted(() => {
      window.removeEventListener('resize', calculateTableHeight)
    })

    return {
      scrollContainer,
      tableHeight,
      containerHeight: `calc(100vh - ${props.topHeight}px)`
    }
  }
}
</script>

<style scoped>
/* 原有样式不变 */
.table-scroll-container {
  /* overflow-y: auto; */
  padding-right: 8px;
  box-sizing: border-box;
}

:deep(.el-table__fixed-right) {
  height: 100% !important;
}

/* 滚动条样式 */
.table-scroll-container::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.table-scroll-container::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background-color: #ccc;
  transition: background-color 0.2s;
}
.table-scroll-container::-webkit-scrollbar-thumb:hover {
  background-color: #999;
}
.table-scroll-container::-webkit-scrollbar-track {
  background-color: transparent;
}
</style>